<template>
   <el-form class="container" ref="adminForm" :rules="rules" :model="adminForm">
        <h3>员工信息管理系统</h3>
       <el-form-item prop="adminName">
           <el-input placeholder="请输入账号" v-model="adminForm.adminName"></el-input>
       </el-form-item>
       <el-form-item prop="passWord">
            <el-input placeholder="请输入密码" type="password" v-model="adminForm.passWord"></el-input>
       </el-form-item>
       <el-form-item>
           <el-button type="primary" style="width:100%;" :loading="$store.state.isLoading" @click="submitForm">登录</el-button>
       </el-form-item>
   </el-form>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                
                adminForm:{
                    adminName:"",
                    passWord:""
                },
                rules:{
                    adminName:[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                    ],
                    passWord: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            submitForm(){
                // 表单验证
                this.$refs.adminForm.validate(async valid=>{
                    if(valid){
                        // 发送登陆请求
                        this.isLoading = true;
                        const data = await this.$store.dispatch("login",this.adminForm);
                        if(data.ok === 1){
                            this.$store.commit("CHANGE_LOGIN_INFO",data);
                        }else{
                            this.$message.error(data.msg);
                        }

                    }else{
                        this.$message.error('错了哦，请输入合法的信息');
                    }
                })
            }
        }

    }

</script>

<style scoped lang="less">
    .container{
        border:1px solid #eaeaea;
        margin:250px auto;
        width:350px;
        h3{
            text-align:center;
        }
    }

</style>